<template>
  <view>
    <view class="navBox">
      <text>接单</text>
    </view>
    <view-tabbar :current="current"></view-tabbar>
    <view class="container">
      <s-tabs effect @change="change" @render="render" activeColor="black"
              :barColor="getThemColor()" barHeight=8 barWidth=50>
        <s-tab v-for="(item,index) in tabList" :title="item" :key="index">
          <view class="recommendDetails" v-if="item==='去接单'">
            <view class="order-item" v-for="(order, index) in orderList" :key="index"
                  @click="toTake(order)">
              <view class="order-detail">
                <!-- your order detail content here -->
                <view class="info-section">
                  <text class="info-title">店家:</text>
                  <text class="info-content">{{ order.businessName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">订单号:</text>
                  <text class="info-content">{{ order.id }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">状态:</text>
                  <text class="info-content">{{ getStatusText(order.status) }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">下单用户ID:</text>
                  <text class="info-content">{{ order.userId }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">地址:</text>
                  <text class="info-content">{{ order.addressBookName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">下单时间:</text>
                  <text class="info-content">{{ order.checkoutTime }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="recommendDetails" v-if="item==='配送中'">
            <view class="order-item" v-for="(order, index) in serviceList" :key="index"
                  @click="toTake(order)">
              <view class="order-detail">
                <!-- your order detail content here -->
                <view class="info-section">
                  <text class="info-title">店家:</text>
                  <text class="info-content">{{ order.businessName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">订单号:</text>
                  <text class="info-content">{{ order.id }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">状态:</text>
                  <text class="info-content">{{ getStatusText(order.status) }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">下单用户ID:</text>
                  <text class="info-content">{{ order.userId }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">地址:</text>
                  <text class="info-content">{{ order.addressBookName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">下单时间:</text>
                  <text class="info-content">{{ order.checkoutTime }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="recommendDetails" v-if="item==='已完成'">
            <view class="order-item" v-for="(order, index) in finishList" :key="index"
                  @click="toTake(order)">
              <view class="order-detail">
                <!-- your order detail content here -->
                <view class="info-section">
                  <text class="info-title">店家:</text>
                  <text class="info-content">{{ order.businessName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">订单号:</text>
                  <text class="info-content">{{ order.id }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">状态:</text>
                  <text class="info-content">{{ getStatusText(order.status) }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">下单用户ID:</text>
                  <text class="info-content">{{ order.userId }}</text>
                </view>

                <view class="info-section">
                  <text class="info-title">地址:</text>
                  <text class="info-content">{{ order.addressBookName }}</text>
                </view>
                <view class="info-section">
                  <text class="info-title">下单时间:</text>
                  <text class="info-content">{{ order.checkoutTime }}</text>
                </view>
              </view>
            </view>
          </view>

        </s-tab>
      </s-tabs>


    </view>
  </view>

</template>

<script>
import Tabbar from '@/components/tabbar/tabbar.vue'
import STabs from "@/components/s-tabs/index.vue";
import sTabs from "@/components/s-tabs/index.vue";
import sTab from "@/components/s-tab/index.vue";
import {emcolor, getThemColor} from "@/common/auth";
import {getStatusText} from "@/common/common";
import {getAllBusinessApi, getAllOrderByBusApi, getByEmployeeIdApi, getUnExcpetApi} from "@/network/api";

export default {
  components: {
    'view-tabbar': Tabbar,
    sTabs,
    sTab
  },
  data() {
    return {
      current: "0",
      currentIndex: 0,
      index: 0,
      tabList: ['去接单', '配送中', '已完成'],
      serviceList: [],
      finishList: [],
      orderList: []
    }
  },
  onShow() {
    uni.hideTabBar({
      animation: false
    })
    this.getData()
  }, methods: {
    getData() {
      const _this = this

      getUnExcpetApi().then(res => {
        _this.orderList = []
        res.data.forEach(one => {
          _this.orderList.push(one)
        })
      }).catch(err => {
        console.log(err)
      })

      getByEmployeeIdApi().then(res => {
        _this.serviceList = []
        _this.finishList = []
        res.data.forEach(one => {
          if (one.status === 3) {
            _this.serviceList.push(one)
          } else {
            _this.finishList.push(one)
          }
        })
      }).catch(err => {
        console.log(err)
      })


    },
    getStatusText,
    getThemColor,
    change(index) {
      console.log('change:', index);
      this.currentIndex = index
    },
    render(index) {
      console.log('render:', index);
    },
    confirm() {

    },
    toTake(order) {
      uni.navigateTo({
        url: '../bgTakeOrders/bgTakeOrders?order=' + JSON.stringify(order)
      });
    }

  }
}
</script>

<style>
.container {
  padding: 20rpx 5rpx 100rpx;
  min-height: 80vh; /* Use min-height instead of height */
  overflow: hidden; /* prevent content from overflowing */
}

.order-item {
  justify-content: space-between;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.order-column {
  flex: 1;
}

.label {
  font-weight: bold;
  color: #555;
}


</style>